/*
 * @Author: xiaosihan 
 * @Date: 2022-07-11 07:51:56 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-07-24 19:27:50
 */

// PC页面模板组件 - 严格遵循此模板的导入顺序和格式
import React, { useEffect } from 'react';

// 页面样式必须要使用module.less后缀的文件
import clsx from 'clsx';
import styles from './index.module.less';

// 每个页面都需要引入对应的store
import home2Store from "./home2Store";
import { toJS } from 'mobx';

// 子组件导入

// 其他导入
import hashHistory from "@/srcWeb/hashHistory";
import { autorun } from "mobx";
import homeRenderer from "./homeRender";

// PC端使用observer来包裹组件，使mobx可以监听状态变化
import { observer } from 'mobx-react-lite';

// 组件props接口定义
interface Iprops {
    children?: React.ReactNode;
}

/**
 * Home2页面组件
 * 遵循项目统一的开发规范
 */
// 重要：组件函数不要使用React.FC类型注解
const Home2 = observer((props: Iprops) => {
    // store中的基本类型状态值，使用解构方式获取
    const { value } = home2Store;

    // 页面生命周期：监听store值变化
    useEffect(() => {
        const disposer = autorun(() => {
            console.log(value);
        });

        // 清理函数
        return () => disposer();
    }, []);

    return (
        <div
            className={styles.contentContainer}
            onDoubleClick={() => {
                home2Store.setValue(home2Store.value === 1 ? 0 : 1);
            }}
        >
            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>
        </div>
    );
});

export default Home2;